<template>
  <div class="index" id="a1">
    <commonHeader></commonHeader>

    <!-- swiper1 -->
    <div class="swiper-wrap">
      <swiper class="swiper-container swiper-container1" :options="swiperOption1" ref="mySwiper1"
        v-if="ListBanner.length">
        <swiper-slide class="swiper-item" v-for="(item, index) of ListBanner" :key="index">
          <img class="swiper-img" :src="item.banner" alt="" />
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination" v-if="ListBanner.length > 1"></div>

      <div style="position: absolute;right: 20px;bottom:50px;z-index: 8;">
        测试vuex:
        <input type="text" style="border: 1px solid #000;width:300px;height:50px;font-size:20px" v-model="Vuex111" />
      </div>
    </div>
    <div class="medicalCenter-wrap">
      <div class="medicalCenter wow fadeInUp bangxin">
        <div class="common-tit">
          <div class="text">六大医学中心</div>
          <div class="introduct">开启私密年轻新时代</div>
        </div>
        <div class="medicalCenter-con">
          <router-link class="item" to="/strength/medicine#a0">
            <div class="show">
              <div class="cn">综合检测中心</div>
              <div class="en">COMPREHENSIVE TESTING CENTER</div>
              <div class="intro">在这里 停下匆忙的脚步</div>
              <img class="icon" src="~@/assets/img/six-icon1.png" alt="" />
            </div>
            <div class="hide">
              <div class="en">
                COMPREHENSIVE <br />
                TESTING CENTER
              </div>
              <div class="cn">综合检测中心</div>
              <img class="icon" src="~@/assets/img/six1.png" alt="" />
            </div>
          </router-link>
          <router-link class="item" to="/strength/medicine#a1">
            <div class="show">
              <div class="cn">光电治疗中心</div>
              <div class="en">PHOTOELECTRIC TREATMENT CENTER</div>
              <div class="intro">逆转时光 蜜恋如初</div>
              <img class="icon" src="~@/assets/img/six-icon2.png" alt="" />
            </div>
            <div class="hide">
              <div class="en">
                PHOTOELECTRIC <br />
                TREATMENT CENTER
              </div>
              <div class="cn">光电治疗中心</div>
              <img class="icon" src="~@/assets/img/six2.png" alt="" />
            </div>
          </router-link>
          <router-link class="item" to="/strength/medicine#a2">
            <div class="show">
              <div class="cn">私密微整中心</div>
              <div class="en">PRIVATE MICRO PLASTIC CENTER</div>
              <div class="intro">完美还原最初的你</div>
              <img class="icon" src="~@/assets/img/six-icon3.png" alt="" />
            </div>
            <div class="hide">
              <div class="en">
                RIVATE MICRO <br />
                PLASTIC CENTER
              </div>
              <div class="cn">私密微整中心</div>
              <img class="icon" src="~@/assets/img/six3.png" alt="" />
            </div>
          </router-link>
          <router-link class="item" to="/strength/medicine#a3">
            <div class="show">
              <div class="cn">健康御龄中心</div>
              <div class="en">HEALTH AND AGEING CENTRE</div>
              <div class="intro">自然和谐 御龄新生</div>
              <img class="icon" src="~@/assets/img/six-icon4.png" alt="" />
            </div>
            <div class="hide">
              <div class="en">
                HEALTH AND <br />
                AGEING CENTRE
              </div>
              <div class="cn">健康御龄中心</div>
              <img class="icon" src="~@/assets/img/six4.png" alt="" />
            </div>
          </router-link>
          <router-link class="item" to="/strength/medicine#a4">
            <div class="show">
              <div class="cn">手术诊疗中心</div>
              <div class="en">SURGICAL TREATMENT CENTRE</div>
              <div class="intro">微创呵护 舒适安心</div>
              <img class="icon" src="~@/assets/img/six-icon5.png" alt="" />
            </div>
            <div class="hide">
              <div class="en">
                SURGICAL <br />
                TREATMENT CENTRE
              </div>
              <div class="cn">手术诊疗中心</div>
              <img class="icon" src="~@/assets/img/six5.png" alt="" />
            </div>
          </router-link>
          <router-link class="item" to="/strength/medicine#a5">
            <div class="show">
              <div class="cn">心灵愈疗中心</div>
              <div class="en">SOUL HEALING CENTER</div>
              <div class="intro">以你最好的状态回应世界</div>
              <img class="icon" src="~@/assets/img/six-icon6.png" alt="" />
            </div>
            <div class="hide">
              <div class="en">
                SOUL HEALING <br />
                CENTER
              </div>
              <div class="cn">心灵愈疗中心</div>
              <img class="icon" src="~@/assets/img/six6.png" alt="" />
            </div>
          </router-link>
        </div>
        <div class="more-wrap">
          <router-link class="more" to="/strength/medicine">
            了解惠元的医学中心
          </router-link>
        </div>
      </div>
    </div>

    <div class="system wow fadeInUp">
      <div class="common-tit">
        <div class="text">八大项目体系</div>
      </div>
      <div class="system-tit" @mouseenter="enter()" @mouseleave="leave()">
        <swiper :options="swiperOption2" class="swiper-container2" ref="mySwiper2">
          <swiper-slide class="swiper-item stop-swiping">
            <router-link class="slide-con" to="/strength/project#a0">
              <div class="info">
                <div class="cn">精准检测管理</div>
                <div class="en">ACCURATE DETECTION</div>
              </div>
            </router-link>
          </swiper-slide>
          <swiper-slide class="swiper-item stop-swiping">
            <router-link class="slide-con" to="/strength/project#a1">
              <div class="info">
                <div class="cn">多元提升管理</div>
                <div class="en">MULTIPLE ASCENSION</div>
              </div>
            </router-link>
          </swiper-slide>
          <swiper-slide class="swiper-item stop-swiping">
            <router-link class="slide-con" to="/strength/project#a2">
              <div class="info">
                <div class="cn">康复再造管理</div>
                <div class="en">REHABILITATION REENGINEERING</div>
              </div>
            </router-link>
          </swiper-slide>
          <swiper-slide class="swiper-item stop-swiping">
            <router-link class="slide-con" to="/strength/project#a3">
              <div class="info">
                <div class="cn">功能重塑管理</div>
                <div class="en">FUNCTION TO RESTORE</div>
              </div>
            </router-link>
          </swiper-slide>
          <swiper-slide class="swiper-item stop-swiping">
            <router-link class="slide-con" to="/strength/project#a4">
              <div class="info">
                <div class="cn">颜值设计管理</div>
                <div class="en">APPEARANCE LEVEL DESIGN</div>
              </div>
            </router-link>
          </swiper-slide>
          <swiper-slide class="swiper-item stop-swiping">
            <router-link class="slide-con" to="/strength/project#a5">
              <div class="info">
                <div class="cn">性值激活管理</div>
                <div class="en">SEXUAL VALUES ACTIVATION</div>
              </div>
            </router-link>
          </swiper-slide>
          <swiper-slide class="swiper-item stop-swiping">
            <router-link class="slide-con" to="/strength/project#a6">
              <div class="info">
                <div class="cn">无龄维护管理</div>
                <div class="en">NO AGE TO MAINTAIN</div>
              </div>
            </router-link>
          </swiper-slide>
          <swiper-slide class="swiper-item stop-swiping">
            <router-link class="slide-con" to="/strength/project#a7">
              <div class="info">
                <div class="cn">疾病治疗管理</div>
                <div class="en">DISEASE TREATMENT</div>
              </div>
            </router-link>
          </swiper-slide>
          <div class="swiper-pagination2" slot="pagination"></div>
        </swiper>
      </div>
      <div class="system-con">
        <img class="bg-img" src="~@/assets/img/system-bg.png" alt="" />
        <div class="info">
          <div class="en">
            <span>P</span>RIVATE <br />
            HEALT<span>H</span>
          </div>
          <div class="cn">创新全球私密健康生态</div>
        </div>
      </div>
    </div>

    <div class="doctor wow fadeInUp">
      <div class="common-tit">
        <div class="text">名医荟萃</div>
        <div class="introduct">严谨博学以医载道</div>
      </div>
      <div class="doctor-con">
        <swiper v-if="ListPhysician.length" :options="swiperOption3" class="swiper-container swiper-container3"
          ref="mySwiper3">
          <swiper-slide class="swiper-item" v-for="(item, index) of ListPhysician" :key="index">
            <div class="shadow"></div>
            <img class="swiper-img" :src="item.banner" alt="" />
          </swiper-slide>
        </swiper>
        <div class="info">
          <div class="en">
            <span>F</span>AMOUS <br />
            DOCTO<span>R</span>
          </div>
          <div class="cn">
            惠元不断整合国际资源、汇聚权威医师，只为让更多女性悦享生命品质，重新绽放美丽、健康、幸福的人生。
          </div>
          <div class="more-wrap">
            <router-link class="more" to="/strength/doctors">
              了解更多医师
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <div class="news-wrap">
      <div class="news wow fadeInUp bangxin">
        <div class="common-tit">
          <div class="text">新闻中心</div>
          <!-- <div class="introduct">严谨博学以医载道</div> -->
        </div>
        <div class="news-con">
          <div class="news-left">
            <router-link class="link" :to="{ path: '/hello/newsDetail', query: { id: ListNews[0].id } }"
              v-if="ListNews[0]">
              <div class="bg-img-wrap">
                <div class="shadow"></div>
                <img class="img" :src="ListNews[0].picture" alt="" />
              </div>

              <div class="info">
                <div class="tit-small">{{ ListNews[0].name }}</div>
                <div class="tit-big ellipsis_two_line">
                  {{ ListNews[0].title }}
                </div>
                <div class="introduct ellipsis_two_line">
                  {{ ListNews[0].description }}
                </div>
              </div>
            </router-link>
          </div>
          <div class="news-right">
            <router-link class="link" :to="{ path: '/hello/newsDetail', query: { id: ListNews[1].id } }"
              v-if="ListNews[1]">
              <div class="text">
                <div class="info">
                  <div class="tit-small">{{ ListNews[1].name }}</div>
                  <div class="tit-big ellipsis_two_line">
                    {{ ListNews[1].title }}
                  </div>
                  <div class="introduct ellipsis_two_line">
                    {{ ListNews[1].description }}
                  </div>
                  <div class="dot">...</div>
                </div>
              </div>
              <img class="img" :src="ListNews[1].picture" alt="" />
            </router-link>
            <router-link class="link" :to="{ path: '/hello/newsDetail', query: { id: ListNews[2].id } }"
              v-if="ListNews[2]">
              <div class="text">
                <div class="info">
                  <div class="tit-small">{{ ListNews[2].name }}</div>
                  <div class="tit-big ellipsis_two_line">
                    {{ ListNews[2].title }}
                  </div>
                  <div class="introduct ellipsis_two_line">
                    {{ ListNews[2].description }}
                  </div>
                  <div class="dot">...</div>
                </div>
              </div>
              <img class="img" :src="ListNews[2].picture" alt="" />
            </router-link>
          </div>
        </div>
        <div class="more-wrap">
          <router-link class="more" to="/hello/news">
            了解更多新闻
          </router-link>
        </div>
      </div>
    </div>




    <commonFooter></commonFooter>
  </div>
</template>

<script lang="ts">
  import { Component, Vue, Ref } from "vue-property-decorator";
  import commonHeader from "@/components/headers.vue";
  import commonFooter from "@/components/footer.vue";
  // ajax
  import { Home, NewsListTop } from "@/assets/js/api";
  @Component({
    name: "index",
    components: {
      commonHeader,
      commonFooter,
    },
  })
  export default class extends Vue {
    that = this;
    // 轮播图
    ListBanner = [];
    // 轮播图配置
    swiperOption1 = {
      loop: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
      //修改swiper自己或子元素时，自动初始化swiper
      observer: true,
      //修改swiper的父元素时，自动初始化swiper
      observeParents: true,
      pagination: {
        el: ".swiper-pagination",
        type: "bullets",
        clickable: true,
      },
    };

    swiperOption2 = {
      paginationClickable: true,
      //循环
      loop: true,
      // 用户操作swiper之后，是否禁止autoplay
      autoplayDisableOnInteraction: false,
      //滑动速度
      speed: 1000,
      // delay:1000
      prevButton: ".swiper-button-prev2",
      nextButton: ".swiper-button-next2",
      //修改swiper自己或子元素时，自动初始化swiper
      observer: true,
      //修改swiper的父元素时，自动初始化swiper
      observeParents: true,
      // 不可拖动块的类名
      noSwipingClass: "stop-swiping",
      slidesPerView: 4, //slide可见数量
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
    };

    // 名医荟萃
    ListPhysician = [];

    swiperOption3 = {
      effect: "fade",
      // 参数选项,显示小点
      pagination: ".swiper-pagination",
      paginationClickable: true,
      //循环
      loop: true,
      //每张播放时长3秒，自动播放
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
      // 用户操作swiper之后，是否禁止autoplay
      autoplayDisableOnInteraction: false,
      //滑动速度
      speed: 1000,
      //修改swiper自己或子元素时，自动初始化swiper
      observer: true,
      //修改swiper的父元素时，自动初始化swiper
      observeParents: true,
    };

    // 新闻
    ListNews = [];

    // computed获取值
    get Vuex111() {
      return this.$store.state.Vuex111;
    }
    // computed设置值
    set Vuex111(value) {
      console.log(value, "input的value");
      this.$store.commit("updateMessage", value.toUpperCase());
    }

    // computed: {
    //   swiper() {
    //     return this.$refs.mySwiper.swiper;
    //   }
    // }
    // 使用computed获取swiper，方法同上
    get swiper1(): any {
      console.log(this.$refs, "this.$refs.mySwiper1")
      return this.$refs.mySwiper1.$swiper;
    }

    // @Ref('mySwiper1') readonly ref!: HTMLButtonElement;
    // @Ref('mySwiper2') readonly ref!: HTMLButtonElement;
    // @Ref('mySwiper3') readonly ref!: HTMLButtonElement;

    get swiper2(): any {
      return this.$refs.mySwiper2.$swiper;
    }

    // let el:any = this.$refs.ceshi;

    get swiper3(): any {
      return this.$refs.mySwiper3.$swiper;
    }

    mounted() {
      console.log(this.$refs.mySwiper2.$swiper, "this.$refs.mySwiper2.$swiper");
      Home().then((response: any) => {
        console.log(response.data, "Home");
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            this.ListBanner = data[0].ListBanner;
            this.ListPhysician = data[0].ListPhysician;
            this.$nextTick(() => {
              console.log(this.swiper1, "this.swiper");
              this.swiper1.autoplay.stop();
              console.log("轮播图暂停，6秒后开启自动轮播");
              setTimeout(() => {
                this.swiper1.autoplay.start();
                console.log("轮播图开启自动轮播啦");
              }, 6000);
            });
          }
        }
      });
      // 置顶新闻
      NewsListTop().then((response: any) => {
        console.log(response.data, "置顶新闻");
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            this.ListNews = data;
            this.$nextTick(() => {
              // this.wowFun();
            });
          }
        }
      });
    }

    enter(): void {
      this.swiper2.autoplay.stop();
    }
    leave(): void {
      this.swiper2.autoplay.start();
    }
  }
</script>

<style lang="scss">
  @import "~@/assets/scss/index.scss";

  .swiper-pagination {
    bottom: 0.44rem;
    font-size: 0;
    left: 50%;
    transform: translateX(-50%);

    .swiper-pagination-bullet {
      width: 0.34rem;
      height: 0.05rem;
      opacity: 0.3;
      background: #ffffff !important;
      border-radius: 0;
      margin: 0 0.04rem;

      &.swiper-pagination-bullet-active {
        opacity: 1;
      }
    }
  }
</style>